<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>问题详情</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
	<link rel="stylesheet" href="/H5/css/sm.min.css">
	<link rel="stylesheet" href="/H5/css/reset.css?v=1">
	<link rel="stylesheet" type="text/css" href="css/withdraw_money.css?v=6" />
</head>
<body>
    <div class="page-group ms-controller" :controller="customDetail">
        <div class="page page-current">
        	<header class="bar bar-nav">
        	    <a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
        	    <a class="icon icon-home pull-right" href="/H5"></a>
        	    <h1 class="title">互动问答</h1>
        	</header>
            <div class="content visibility">
	            <div class="message_white">
	            	<div class="linewhat_div_second">
	                	<span class="solve" :css="{'background-color': @data.question.status==0?'#0c0':@data.question.status==1?'#999':''}">{{@data.question.status_label||""}}</span>
	                    {{@data.question.title||""}}
	                    <time class="timeOne">{{@data.question.create_time||""}}</time>
	                </div>
	            </div>
	            <div class="qa">
	            	<div :for="el in @data.list">
		                <ul class="qa_left">
		                	<li class="qa_li_left"><img :visible="!el.is_questioner" :attr="{'src':el.avatar_url}"/></li>
		                    <li class="qa_li_center"><div :visible="!el.is_questioner" class="qa_q qa_a"><div style="display: block; color: #eee; font-size: .7rem">{{el.create_time}}</div>{{el.content}}</div><div :visible="el.is_questioner" class="qa_q" style="float: right"><div style="display: block; color: #eee; font-size: .7rem">{{el.create_time}}</div>{{el.content}}</div></li>
		                	<li class="qa_li_right"><img :visible="el.is_questioner" :attr="{'src':el.avatar_url}"/></li>
		                </ul>
	            	</div>
	            </div>
				<div class="qa_main" :if="@data.question.status==0">
					<button style="float:left; margin-right:1%; background:white; border:1px solid #ccc; color:#999" :on-click="@consolve(@data.question.id,$event)">评价</button>
	            	<input type="text" :duplex="@zw" />
	                <button :on-click="@send">发送</button>
	            </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/mall.js' charset='utf-8'></script>
    <script>
        var customDetail = avalon.define({
            $id: "customDetail",
            zw: "",
            data: {question:{title:"",create_time:"",status_label:""}},
            id: Mall.parseUrl( window.location.href ).id,
            getDetail: function( o ){
                Mall.request("/api/QuestionDetail",{question_id: customDetail.id})
                	.always( function( data ){
                		if( data.error_code == 0 ){
                		    customDetail.data = data.data;
                		}
                		else{
                		    $.alert(data.error_msg);
                		}
                		if( o ){
                			$( ".content" ).removeClass( "visibility" );
                		}
                		setTimeout( function(){
                			$( ".content" ).scrollTop( $('div.qa').height());
                		}, 100 )
                	} )
            },
            send: function(){
            	if( !customDetail.zw ){
            		return
            	}
            	Mall.request( "/api/QuestionAnswer",{question_id: customDetail.id,content: customDetail.zw} )
            		.always( function( data ){
            			if( data.error_code == 0 ){
            			    customDetail.getDetail();
            			    customDetail.zw="";
            			}
            			else{
            			    $.alert(data.error_msg);
            			}
            		} )
            },
            consolve: function( id, e ){
                e.stopPropagation();
                $.modal({
                    title: '请选择您的评价?',
                    afterText:  '<div class="item-input"><select id="pj" style="width: 50%;padding: 3%;margin: 10px;border-radius: 5px;"><option value="1">已解决</option><option value="2">未解决</option></select></div>',
                    buttons: [
                       {
                        text: '取消'
                       },
                       {
                        text: '确定',
                        onClick: function () {
                           Mall.request("/api/QuestionEvaluate",{question_id: customDetail.id,status: $( "#pj" ).find('option:checked').val()})
                            .always( function( data ){
                                if( data.error_code == 0 ){
                                    $.toast( "评价成功", 1000, "success", function(){
                                        customDetail.getDetail();
                                    } )
                                }
                                else{
                                    $.alert(data.error_msg);
                                }
                            } )
                        }
                       },
                     ]
                })
            }
        })
        customDetail.getDetail( true );
        avalon.scan( document.body )
    </script>
</body>
</html>
